import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import globalization from "@/assets/svg/globalization.svg?component";
import router from "@/router";
import { changeBrowserTitle } from "@/router/utils";
import { useConfigStore } from "@/stores/config";

export default defineComponent({
    name: "ReTranslate",
    props: {
        classes: {
            type: String,
            default: "hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300",
        },
    },
    components: {
        globalization,
    },
    setup(props) {
        const { locale } = useI18n();
        const { config, SET_PLATFORM_CONFIG } = useConfigStore();

        const translate = (lang: string): void => {
            if (lang === config.Locale) return;
            SET_PLATFORM_CONFIG({ Locale: lang });
            locale.value = lang;
            changeBrowserTitle(router.currentRoute.value); // 更新浏览器标签页标题
        };
        return () => (
            <el-dropdown
                trigger="click"
                v-slots={{
                    dropdown: () => (
                        <el-dropdown-menu>
                            <el-dropdown-item disabled={config.Locale === "zh"} onClick={() => translate("zh")}>
                                简体中文
                            </el-dropdown-item>
                            <el-dropdown-item disabled={config.Locale === "en"} onClick={() => translate("en")}>
                                English
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    ),
                }}
            >
                <globalization class={props.classes} />
            </el-dropdown>
        );
    },
});
